
.i_nav{
  height:70px;
  background: #333;
  .logo{
    width:160px;
    margin-right:20px;
    float: left;height:70px;
  }
  ul{
    float: right;
    li{
      float: left;
      font-size:16px;
    }
    span.active{
      background: #454545;}
    a{color:#fff;padding:0 18px;
      display: block;
      line-height:70px;
      &:hover,&.active{
        background: #454545;
      }
    }
  }
}
.show_list{
  span{
    position: relative;
    display: block;
    &::before{
      content:"";border-width:4px;border-style:solid;border-color:#fff transparent transparent transparent;
      position: absolute;top:50%;right:4px;
      margin-top:-2px;
    }
  }
  position: relative;
  &>div{
    position: absolute;left:0;top:70px;z-index:50;padding:5px 0 10px;border-radius: 0 0 5px 5px;
    text-align: center;
    font-size:14px;
    background: #454545;
    display: none;
    width:98px;

    a{
      display: block;
      line-height:40px;
      box-shadow:inset 0 0 2px 2px transparent;
      transition:0.3s;
      &:hover{
        background: #333;text-shadow:1px 2px 2px #000;
        box-shadow:inset 0 0 1px 1px #8d8d8d;
      }
    }
  }
}

.banner {
  width: 100%;max-width:1920px;
  height: 384px;margin:0 auto;
  overflow: hidden;
  position: relative; }
.banner img {
  width: 100%;
  height: 384px;
}
.banner li {
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  max-width:1920px;
}
.banner .small_btn {
  position: absolute;
  left: 0;
  bottom: 18px;
  z-index: 20;
  width: 100%;
  height: 6px;
  text-align: center;
}
.banner .small_btn a {
  width: 22px;
  height: 6px;
  background: #fff;
  display: inline-block;
  margin: 0 5px;
}
.banner .small_btn a.active {
  background: #4c93fd;
}

/*content*/
.i_content{
  background: #f5f5f5;
  padding-top:20px;
}
.i_section1{
  background: #fff;padding:20px 10px;border-radius:5px;box-shadow:0 0 1px 1px #eaeaea;width:1180px !important;
}
.base_h3{
  line-height:30px;
  font-size:16px;
}
.i_about{
  width:760px;
  float: left;padding:0 10px 0 10px;
  p{
    padding:16px 10px 30px;
    line-height:22px;
    font-size:14px;color:#989898;text-indent:2em;
  }
  a{color:#403f3f;
    margin-left:5px;
    &:hover{color:#FF8C0E;}
  }
}

.about_link{
  img{
    width:170px;height:90px;
  }
  a{
    position: relative;
    display:inline-block;margin:0 8px;
    &:hover{
      i{opacity:1;}
    }
  }
  i{
    position: absolute;left:0;top:0;width:170px;height:100%;
    background:url(../images/index_20.png) no-repeat;opacity:0;transition:0.3s;
  }
  .span{
    position: absolute;
    width: 150px;
    height: 70px;
    left: 10px;
    top: 10px;
    overflow: hidden;
  }
  .span span{display:inline-block;background:#ff8e3b;position: absolute;width:100%;transition:0.3s;}
  .span span:nth-child(1){width:2px;height:0px;bottom:0;left:0;}
  .span span:nth-child(2){width:0px;height:2px;top:0;left:0;}
  .span span:nth-child(3){width:2px;height:0px;top:0;right:0;}
  .span span:nth-child(4){width:0px;height:2px;bottom:0;right:0;}
  a:hover i{opacity:1;}
  a:hover .span span:nth-child(1){height:70px;}
  a:hover .span span:nth-child(2){width:150px;}
  a:hover .span span:nth-child(3){height:70px;}
  a:hover .span span:nth-child(4){width:150px;}
}
.i_news{
  float: right;width:400px;
  h3{
    border-bottom:1px solid #d4d3d4;
    padding-bottom:5px;
    margin-bottom:5px;
    svg{
      font-size: 30px;
      position: relative;
      top: 4px;
      margin-right: 4px;
    }
  }
  li{

    font-size:12px;
    line-height:20px;
    border-bottom:1px dotted #cacaca;padding:10px 0;
    &:last-child{
      border-bottom:none;
    }
    time,span{
      display: inline-block;color:#999;
    }
    time{
      position: relative;
      padding-left:18px;
      width:120px;
    }
    time::before{
      position: absolute;top:50%;
      margin-top:-7px;left:0;
      content:url('data:image/svg+xml;utf8,<svg class="icon" width="16px" height="16px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ef7d00" d="M514.717901 126.995369c-211.537857 0-383.620098 172.081217-383.620098 383.613958 0 211.537857 172.08224 383.620098 383.620098 383.620098 211.532741 0 383.613958-172.08224 383.613958-383.620098C898.330836 299.076586 726.250642 126.995369 514.717901 126.995369zM514.717901 855.460446c-190.126198 0-344.851119-154.724921-344.851119-344.851119 0-190.151781 154.724921-344.846002 344.851119-344.846002 190.150758 0 344.846002 154.695245 344.846002 344.846002C859.563904 700.735525 704.868659 855.460446 514.717901 855.460446zM487.137753 559.334052c-11.763928 0-21.328771-9.565866-21.328771-21.318538L465.808982 318.853002c0-11.816117 9.565866-21.422915 21.328771-21.422915 11.752672 0 21.318538 9.607822 21.318538 21.422915l0 197.832717L651.512451 516.685719c11.82635 0 21.434172 9.565866 21.434172 21.328771 0 11.752672-9.607822 21.318538-21.434172 21.318538L487.137753 559.333028z" /></svg>')
    }
    span{
      position: relative;
      padding-left:20px;}
    span::before{
      position: absolute;left:0;top:50%;
      margin-top:-9px;
      content:url('data:image/svg+xml;utf8,<svg class="icon" width="18px" height="18.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#999" d="M512 277.9136c-149.7088 0-266.4448 89.2928-409.6 234.0864 123.2896 123.6992 226.7136 234.0864 409.6 234.0864 182.6816 0 317.0304-139.6736 409.6-231.424C826.9824 407.1424 692.6336 277.9136 512 277.9136L512 277.9136zM512 678.912c-90.3168 0-163.84-74.9568-163.84-166.912 0-92.16 73.5232-166.912 163.84-166.912 90.3168 0 163.84 74.9568 163.84 166.912C675.84 604.16 602.3168 678.912 512 678.912L512 678.912zM512 678.912M512 453.4272c0-14.5408 5.3248-27.648 13.9264-37.888-4.5056-0.8192-9.216-1.024-13.9264-1.024-52.6336 0-95.6416 43.6224-95.6416 97.4848s43.008 97.4848 95.6416 97.4848c52.6336 0 95.6416-43.6224 95.6416-97.4848 0-4.3008-0.4096-8.3968-0.8192-12.6976-10.0352 7.7824-22.528 12.6976-36.2496 12.6976C538.2144 512 512 485.7856 512 453.4272L512 453.4272zM512 453.4272" /></svg>');
    }
    &:hover a{
      p{
        color:#FF8C0E;
        transform:translateX(5px);
      }
    }
    p{
      font-size:14px;
      padding:0 0 3px 0;
      transition:0.5s;
      line-height:20px;
      transform:translateX(0);
    }
    a{
      transition:0.3s;
      color:#575757;
    }
  }
}


/*主干课程*/
.base_h2{
  text-align: center;
  font-size:18px;
  line-height:40px;padding: 30px 0 25px;
  h2{
    margin-bottom:10px;
    display: inline;
    position: relative;
    &::before{
      content:"";width:100%;border-bottom:2px solid #5e879b;padding:0 5px;
      position: absolute;left:0;bottom:-10px;
      margin-left:-5px;
    }
  }
}
.i_section2{
  padding-bottom:30px;
  ul{display: -webkit-flex;
    display:flex;flex-wrap: nowrap;justify-content:space-between;
  }
  li{
    width:270px;transition:0.5s;height:250px;
    background: #ececec;
    padding:5px;
    position: relative;

    &::before{
      /* margin: -1px;*/
      border: 1px solid #FF8C0E;
      opacity:0;
      position: absolute;
      content: "";
      z-index: 10;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      transition:0.5s;
      animation: clipMv 8s linear infinite;
    }
    &:hover{
      background: #fff;
      &::before{
        opacity:1;
      }
    }
    img{width:100%;height:200px;}
    p{
      font-size:16px;
      padding-top:10px;
      text-align: center;
      line-height:30px;
      color:#1a1a1a;
    }
  }
}

@keyframes clipMv {
  0%,100% {
    clip: rect(0, 280px, 1px, 0); }
  25% {
    clip: rect(0, 1px, 260px, 0); }
  50% {
    clip: rect(260px, 280px, 260px, 0); }
  75% {
    clip: rect(0, 280px, 260px, 280px); }
}


/*实战项目*/
.i_section3{
  .base_h2{
    padding-bottom:15px;
  }
}
.i_xm{
  background: #e6e6e6;padding:0 0 50px;
}

.poster-main{
  width: 1200px;
  position: relative;
  overflow:hidden;
  margin: 0 auto;
}
.poster-main a,.poster-main img{
  display:block;-webkit-box-shadow: 5px 5px 10px #737373;
  -moz-box-shadow: 5px 5px 10px #737373;
  box-shadow: 5px 5px 10px #737373;
}
.poster-main .poster-list{width: 1000px;	height: 500px;}
.poster-main .poster-list .poster-item{ width: 200px;	height: 500px;	position:absolute;	left:0;	top:0;}
.poster-main .poster-btn{ position:absolute;top:0;z-index:10; cursor:pointer;}
.poster-main .poster-prev-btn{left:0; background: url(../images/left.png) no-repeat right;}
.poster-main .poster-next-btn{right:0; background: url(../images/right.png) no-repeat left;}

/*师资队伍*/
.bj2{
  background: #dfdfdf;
  padding-bottom:80px;
}

.i_teacher{

  width:1200px;margin:15px auto 0;
}
.i_container{
  position:relative;overflow: hidden;height:330px;
  padding:20px 0;
}
.toggle_teacher{
  position:absolute;
  left:0;top:0;
  height:330px;
  width:100000px;
  li{
    height:325px;width:1100px;
    float: left;
    padding:0 50px;
    &:nth-of-type(1){
      display:block;
    }
  }
  .teacher_txt{
    float: right;
    width:700px;border-radius: 3px;
    margin-top:2px;
    box-shadow:0 0 2px 2px #fff;
    background: rgba(255,255,255,0.5);;
    padding: 13px 20px 20px;
  }
  h4{
    font-weight: normal;border-bottom:1px solid #c3c3c3;
    padding-bottom:5px;
    font-size:20px;color:#5e879b;line-height:30px;
    position:relative;
    span{color:#7d7d7d;
      padding-left:5px;
      font-size:14px;}

    &::before{
      position:absolute;content:"";left:0;bottom:-2px;
      background:#fff;height:1px;width:100%;
    }
  }
  p{
    color:#444;height:213px;padding:0 20px;
    overflow-y:auto;
    margin:20px 0;
    line-height:22px;
    font-size:14px;
  }
  .teacher_pic{
    float: left;
    position: relative;
    border-radius: 3px;
    box-shadow:2px 2px 2px 2px #aeaeae;
    img{width:320px;height:320px;border:4px solid #fff;border-radius: 3px;
    }
  }
}

.change_btn{
  text-align: center;
  width:1200px;
  margin:10px auto 0;
  &>div{
    display: inline-block;vertical-align: top;
    width:564px;
    text-align: left;
    overflow: hidden;
    position: relative;
    height:70px;

  }
  .change_b{width:2000px;
    position: absolute;left:0;top:3px;
  }
  a{
    display:inline-block;position:relative;
  }
  div{
    a{margin:0 15px;border:2px solid #fff;border-radius: 50%;transition:0.3s;
     /* &::before{content:"";
        position: absolute;width:68px;height:68px;left:-6px;top:-6px;border:2px dashed #ff8e3b;border-radius:50%;opacity:0;animation:rotateBorder 3s infinite;}*/
      & span{position:relative;width:60px;
        overflow: hidden;
        height:60px;
        display: block;border-radius: 50%;}
      & span::after{transition: 0.3s;
        content:"";position: absolute;width:60px;height:60px;bottom:0;left:0;
        background:rgba(0,0,0,0.3);border-radius:50%;
      }
    }

    /*a.active::before{opacity:1}*/
    a.active{
      border-color:#fbfa36;
    }
    a.active span::after{bottom:-62px;}
  }
  .prev,.next{
    width:40px;height:60px;border:none;
    background:url('data:image/svg+xml;utf8,<svg class="icon" width="30px" height="30px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M798.589952 500.253696c-1.102848-2.282496-2.577408-4.4288-4.46976-6.322176L354.883584 54.695936c-9.068544-9.068544-23.771136-9.068544-32.83968 0l-69.784576 69.784576c-9.068544 9.068544-9.068544 23.771136 0 32.83968L605.289472 510.35136 252.258304 863.382528c-9.068544 9.068544-9.068544 23.77216 0 32.840704l69.784576 69.784576c9.068544 9.068544 23.771136 9.06752 32.83968-0.001024l369.44896-369.447936c0.001024-0.001024 0.001024-0.002048 0.002048-0.002048l69.784576-69.784576c0.567296-0.567296 1.097728-1.156096 1.594368-1.764352C801.496064 517.91872 802.439168 508.218368 798.589952 500.253696z" /></svg>') no-repeat center;
  }
  .prev{transform:rotate(180deg);}

  img{width:60px;height:60px;border-radius: 50%;}
}

@keyframes rotateBorder {
  0%{
    width: 64px;
    height: 64px;
    left: -4px;
    top: -4px;
    transform:rotate(0deg);
  }
  20%{
    width: 68px;
    height: 68px;
    left: -6px;
    top: -6px;
    transform:rotate(0deg);
  }
  80%{
    width: 68px;
    height: 68px;
    left: -6px;
    top: -6px;
    transform:rotate(360deg);
  }
  100%{
    width: 64px;
    height: 64px;
    left: -4px;
    top: -4px;
    transform:rotate(360deg);
  }
}








/*创新联盟*/
.i_section5{
  padding-bottom:10px;
  ul{
    padding-top:10px;
    display: -webkit-flex;
    display:flex;flex-wrap: nowrap;justify-content:space-between;
  }
  li{padding:10px;
    background: #fff;width:260px;height:360px;transition:0.5s;box-shadow:0 1px 1px 1px transparent;
    margin-top:0;
    &:hover{box-shadow:0 1px 1px 1px #c4c4c4;
      margin-top:-10px;}


    .big_p{width:100%;height:200px;}
    .small_p{width:30px;height:30px;border-radius: 50%;}
    h4{color:#2b2b2b;
      text-align: center;
      line-height:24px;
      padding:15px 0 5px;
      font-size:16px;}
    p{
      font-size:14px;color:#676767;
      line-height:20px;
      padding-bottom:15px;
      border-bottom:1px dotted #dadada;
    }
    span{
      display: block;color:#1f7ead;}
  }
  .pr_bottom{
    padding-top:10px;
    display: -webkit-flex;color:#585858;
    display:flex;flex-wrap: nowrap;
    line-height:18px;
    img{
      margin-top:4px;
      margin-right:10px;}
  }
}

/*优秀毕业生*/
.i_section6{
  padding:25px 0 30px;
  ul{
    padding-top:35px;
    display: -webkit-flex;
    display:flex;flex-wrap: nowrap;justify-content:space-between;
  }
  li{
    width:280px;
    background: #fff;height:310px;box-shadow: 0 0 1px 1px transparent;transition:0.5s;border-bottom:1px solid #fff;
    &:hover{border-bottom-color:#5e879b;
      span::before{
        opacity:0.8;
      }

    }
  }
  img{width:100%;height:170px;}
  span{
    display: block;
    overflow: hidden;
    position: relative;
    &::before{
      content: ""; position: absolute; width:200px; height: 100%; top: 0; overflow: hidden;left:-200px;
      background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.4)50%, rgba(255,255,255,0)100%);
      background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.4)), color-stop(100%, rgba(255,255,255,0)));
      background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.4)50%, rgba(255,255,255,0)100%);
      background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.4)50%, rgba(255,255,255,0)100%);
      -webkit-transform: skewX(-25deg);
      -moz-transform: skewX(-25deg);
      transform: skewX(-25deg);
      opacity:0;
      animation:moveOpacity 0.6s infinite;
      -moz-animation:moveOpacity 0.6s infinite; /* Firefox */
      -webkit-animation:moveOpacity 0.6s infinite; /* Safari and Chrome */
      -o-animation:moveOpacity 0.6s infinite; /* Opera */
    }
  }
  div{
    padding:0 15px;
    h4{color:#000;
      background:url(../images/index_19.png) no-repeat 5px 16px;
      font-size:16px;
      line-height:30px;padding:10px 0 5px 25px;
      border-bottom:1px solid #ececec;
    }
    p{color:#b1b1b1;padding:10px 0 5px;
      line-height:20px;
      font-size:14px;}
  }
}

.i_bottom{
  background: #333;
}


@keyframes moveOpacity {
  0%{
    left: -200px;
  }
  100%{
    left: 150%;
  }
}


@-moz-keyframes moveOpacity /* Firefox */
{
  0%{
    left: -200px;
  }
  100%{
    left: 150%;
  }
}

@-webkit-keyframes moveOpacity /* Safari 和 Chrome */
{
  0%{
    left: -200px;
  }
  100%{
    left: 150%;
  }
}

@-o-keyframes moveOpacity /* Opera */
{
  0%{
    left: -200px;
  }
  100%{
    left: 150%;
  }
}

.i_bottom{padding:40px 0;
  .i_logo{
    float: left;width:380px;height:63px;
    margin-top:38px;
  }
}
.i_bottom_lt{
  float: left;
  padding-top:20px;
  li{width:150px;
    line-height:32px;
    float: left;}
  a{color:#fff;
    font-size:14px;
    transition:0.3s;
    text-shadow: 1px 2px 2px transparent;
    &:hover{color:#eaeaea;
      text-shadow: 2px 2px 2px #FF8C0E;
    }
  }
}
.i_code{
  float: right;
  margin-right:20px;
  span{
    display: block;width:140px;height:140px;
    background:url(../images/index_21.png) no-repeat;
  }
  img{width:128px;height:128px;margin:6px 0 0 6px;}
}

.i_footer{
  background: #222;
  font-size:14px;
  text-align: center;color:#575454;
  line-height:40px;
  span{color:#7a7474;padding-left:5px;}
}

/*返回顶部*/
.back_top{
  background:url(../images/gotop1.png) no-repeat;width:44px;height:44px;
  position: fixed;bottom:50px;left:50%;background-size:44px;
  margin-left:610px;
}

